import { useState } from 'react';
import { Button, Empty, Form, Input, message, Modal, Tag } from 'antd';

import request from '@/utils/request';
const BatchUpload = ({
  onChange,
  setSelectState,
  url,
  requestData,
  setTextValues,
  textAreaProps,
  ...props
}) => {
  const [selected, setSelected] = useState([]);
  const [unselected, setUnSelected] = useState([]);
  const [showBatchModal, setShowBatchModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const { TextArea } = Input;
  const [form] = Form.useForm();
  const onSelectChange = () => {
    setLoading(true);
    request(url, {
      method: 'POST',
      data: { ...requestData, ...form.getFieldsValue() },
    }).then((resp) => {
      setLoading(false);
      setTextValues &&
        setTextValues(
          resp.data.selected.map(({ tag_data_id, value }) => ({
            tagDataId: tag_data_id,
            value,
          })),
        );
      setSelected(resp.data.selected);
      setUnSelected(resp.data.un_selected);
      if (resp.data.un_selected?.length === 0) {
        onChange(
          resp.data.selected.map((item) => ({
            value: item.id || item.tag_data_id,
            label: item.label || item.value,
          })),
        );
        setSelectState(false);
        form.setFieldsValue({});
        setShowBatchModal(false);
      }
      message.success('批量查询成功！！！');
    });
  };
  return (
    <>
      <Button
        type="link"
        style={{ paddingLeft: 0 }}
        onClick={() => setShowBatchModal(true)}
        {...props}
      >
        批量上传
      </Button>
      <Modal
        title="批量上传"
        open={showBatchModal}
        onCancel={() => setShowBatchModal(false)}
        onOk={() => {
          onChange(
            selected.map((item) => ({
              value: item.id || item.tag_data_id,
              label: item.label || item.value,
            })),
          );
          form.setFieldsValue({});
          setSelectState(false);
          setShowBatchModal(false);
        }}
      >
        <div style={{ height: '350px' }}>
          <Form form={form} style={{ position: 'relative' }}>
            <Form.Item name="value">
              <TextArea
                style={{
                  width: '100%',
                  height: '150px',
                  overflowY: 'scroll',
                  paddingBottom: '40px',
                }}
                {...textAreaProps}
              />
            </Form.Item>
            <Button
              onClick={onSelectChange}
              style={{ position: 'absolute', right: '10px', bottom: '7px' }}
              loading={loading}
            >
              确认
            </Button>
          </Form>
          {unselected.length !== 0 ? (
            <>
              <span style={{ display: 'block', fontSize: '10px' }}>
                未匹配的标签:
              </span>
              <div style={{ height: '160px', overflow: 'scroll' }}>
                {unselected.map((item) => {
                  return item !== '' ? <Tag key={item}>{item}</Tag> : '';
                })}
              </div>
            </>
          ) : (
            <Empty
              description={'暂无未匹配的标签'}
              style={{ marginTop: '10px' }}
            />
          )}
        </div>
      </Modal>
    </>
  );
};
export default BatchUpload;
